<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Ext.Panel</title>
    <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all-neptune.css"/>
    <script type="text/javascript" src="../lib/ext/ext-all.js"></script>
    <script type="text/javascript" src="../js/dict_store.js"></script>
    <script type="text/javascript" src="../lib/gf/dist.js"></script>
    <script type="text/javascript" src="../lib/ext_ux_treepicker.js"></script>
</head>
<script type="text/javascript">
Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '/ext4/ux/');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.toolbar.Paging',
    'Ext.ModelManager',
    'Ext.tip.QuickTipManager'
]);
var win, searchForm;
Ext.onReady(function () {
    Ext.define('ArticleList', {
        extend: 'Ext.data.Model',
        fields: [
            '_id','title','content','type','create_date','source_from','source_web','source_date','updated_at','author','priority','code','image_page_title_id'
        ],
        idProperty: '_id'
    });

    //获取文章类别字典数据
    var dict = getDict('');

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        pageSize: 20,
        model: 'ArticleList',
        remoteSort: true,
        proxy: {
            type: 'ajax',
            url: '/article/list',
            reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'count'
            },
            simpleSortMode: true
        },
        sorters: [
            {
                property: 'create_date',
                direction: 'DESC'
            }
        ]
    });

    searchForm = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        region: 'north',
        defaultType: 'textfield',
        layout: {type: 'table',columns:3},
        items: [
            {
                xtype: 'treepicker',
                id: 'type',
                fieldLabel: '文章栏目',
                labelAlign:'right',
                name : 'type',
                width: 380,
                labelWidth: 70,
                // margin: '100 0 0 150',
                //rootVisible:true,
                displayField: 'text',
                valueField: 'id',
                minPickerHeight: 300,//默认最小高度
                cascade : 'child',//级联方式:1.child子级联(仅向下勾选子节点)；2.parent父级联(仅向上勾选父节点)；3.both全部级联(向上向下的父/子节点均会勾选)  
                checkModel:'single',//当json数据为不带checked的数据时只配置为single,带checked配置为double为单选,不配置为多选 
                store: Ext.create('Ext.data.TreeStore',{
                    root: {
                      text: '全部',
                      expanded: true
                    },
                    proxy: {
                      type: 'ajax',
                      url: '/dict/tree_ext?parent_code=article_category',
                      // url: '/dict/tree_ext?parent_code=root',
                      reader: {
                        type: 'json'
                      }
                    }
                })
            },{
                fieldLabel: '文章标题',
                width:300,
                labelWidth:100,
                labelAlign:'right',
                name : 'title'
            }
        ]
    });

    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        loadMask: true,
        region: 'center',
        selModel: Ext.create('Ext.selection.CheckboxModel'),
        columns: [
            {
                text: "_id",
                dataIndex: '_id',
                hidden: true
            },
            {
                text: '文章标题',
                dataIndex: 'title',
                width : "30%"
            },
            {
                text: "栏目名称",
                dataIndex: 'type',
                width: "200",
                renderer : function(value){
                    return dict[value];
                }

            },
            {
                text: '作者',
                dataIndex: 'author',
                width: "10%"
            },{
                text: '文章来源',
                dataIndex : 'source_from'
            },{
                text: '网站来源',
                dataIndex : 'source_web'
            },
            {
                text: '来源日期',
                dataIndex: 'source_date',
                width: 100
            },
            {
                text: '更新日期',
                dataIndex: 'updated_at',
                xtype: 'datecolumn',
                format:'Y-m-d H:i:s',
                width: 140
            },
            {
                text: '状态',
                dataIndex: 'status',
                width: "5%",
                renderer : function(value){
                    if(typeof(value) == "undefined" || value == "" || value == "0"){
                        return "正常";
                    }
                }
            },{
                text: '封面图片',
                dataIndex: 'image_page_title_id',
                renderer: function renderIcon(val) {
                    if(val) {
                        var _url = "/file/download?file_id=" + val;
                        return '<img style="height:60px;" src="' + _url + '">';
                    } else {
                        return ""
                    }
                }
            }
        ],
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: '当前显示  {0} - {1} 共  {2} 条',
            emptyMsg: "没有数据显示！",
            beforePageText: "页码",
            afterPageText: "共 {0} 页",
            firstText:"首页",
            lastText:"末页",
            nextText:"下一页",
            prevText:"上一页",
            refreshText:"刷新"
        }),
        tbar: [
            {
                pressed: true,
                text: '搜  索',
                icon : '../img/search.png',
                handler: doSearch
            },
            {
                pressed: true,
                text: "修  改",
                icon : '../img/edit.png',
                handler: doEdit
            },
            {
                pressed: true,
                icon : '../img/add.png',
                text: "添  加",
                handler: doAdd
            },
            {
                pressed: true,
                icon : '../img/delete.png',
                text: "删  除",
                handler: doDel
            },{
                pressed: true,
                icon : '../img/upload.png',
                text: "附件管理",
                handler: doAddAttach
            }
        ]
    });


    var viewport = new Ext.Viewport({
                layout: 'border',
                renderTo: "topic-grid",
                items: [searchForm,grid]}
    );

    function doSearch(){
        var params = searchForm.getValues();
        if(Ext.getCmp("type") && Ext.getCmp("type").getPicker() && Ext.getCmp("type").getPicker().selModel
                && Ext.getCmp("type").getPicker().selModel.getSelection() && Ext.getCmp("type").getPicker().selModel.getSelection().length > 0){
            params.type_path = Ext.getCmp("type").getPicker().selModel.getSelection()[0].getPath();
            params.type = Ext.getCmp("type").getPicker().selModel.getSelection()[0].getId();
        }
        store.loadPage(1,{params:params});
    }

    store.on('beforeload',function(store, operation,eOpts){
        var params = searchForm.getValues();
        if(Ext.getCmp("type") && Ext.getCmp("type").getPicker() && Ext.getCmp("type").getPicker().selModel
                && Ext.getCmp("type").getPicker().selModel.getSelection() && Ext.getCmp("type").getPicker().selModel.getSelection().length > 0){
            params.type_path = Ext.getCmp("type").getPicker().selModel.getSelection()[0].getPath();
            params.type = Ext.getCmp("type").getPicker().selModel.getSelection()[0].getId();
        }
        operation.params= params;
    },this);

    function showHandlerWin(url,title){
        win = null;
        if (!win) {
            win = new top.Ext.Window({
                title: title,
                header: {
                    titlePosition: 2,
                    titleAlign: 'center'
                },
                autoScroll: true,
                closable: true,
                closeAction: 'hide',
                width: '100%',
                height: '100%',
                x : 0,
                y : 0,
                html : '<iframe width="100%" height="100%" frameborder="0" src="' + url + '"></iframe>',
                bbar:[{
                    text:'关闭',
                    icon : '/admin/img/close.png',
                    handler:function(){
                        this.up('window').destroy();
                    }
                }]
            })
        }
        win.show();
    }
    function doEdit() {
        var orows = grid.getSelectionModel().getSelection();
        if(orows.length == 0){
            Ext.MessageBox.show({title: "消息提示",
                msg: "请选择一条记录",
                width: 200,
                icon: Ext.MessageBox.INFO
            });
            return;
        }
        var url = "/admin/article/add.html?_id=" + orows[0].data._id;
        showHandlerWin(url,"修改文章");
    }
    function doAddAttach(){
        var orows = grid.getSelectionModel().getSelection();
        if(orows.length == 0){
            Ext.MessageBox.show({title: "消息提示",
                msg: "请选择一条记录",
                width: 200,
                icon: Ext.MessageBox.INFO
            });
            return;
        }
        var url = "/admin/article/attach.html?_id=" + orows[0].data._id;
        showHandlerWin(url,"附件管理");
    }

    function doAdd(){
        var url = "/admin/article/add.html";
        showHandlerWin(url,"新增文章");
    }

    function doDel() {
        Ext.MessageBox.confirm('消息提示', '确定删除对象？', function (btn) {
            if (btn == "yes") {
                var orows = grid.getSelectionModel().getSelection();
                if (orows.length == 0) {
                    Ext.MessageBox.show({title: "消息提示",
                        msg: "请选择一条记录",
                        width: 200,
                        icon: Ext.MessageBox.INFO
                    });
                    return;
                }
                Ext.Ajax.request({
                    url: '/article/del',
                    params: { _id: orows[0].get('_id') },
                    method: 'POST',
                    success: function (response, options) {
                        Ext.MessageBox.alert('消息提示', '操作成功！');
                        store.loadPage(1);
                    },
                    failure: function (response, options) {
                        Ext.MessageBox.alert('消息提示', '操作失败！');
                    }
                });
            }
        })

    }

    // trigger the data store load
    store.loadPage(1);



    window.refresh = function(){
        store.loadPage(1);
    }

    dict_store.load({params:{parent_code : "article_category"}});

    window.closeWin = function(){
        win.hide();
    }
});
</script>
<body>
<div id="topic-grid" style="height: 1024px;width:100%"></div>
<p>The js is not minified so it is readable. See <a href="panel.js">panel.js</a>.</p>
</body>
</html>